<template>
	<div class="app">
		<h2>{{ message }}</h2>
		<input type="text" v-model="message">
	</div>
</template>

<script setup lang="ts" name="App">
/**
 * 	https://cn.vuejs.org/api/reactivity-advanced#customref
 *  https://cn.vuejs.org/api/reactivity-advanced.html#customref
 *   自定义ref:  customRef  , 创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。
 * 
 * 
 */
import { ref, customRef, onMounted, isReactive, isRef, onBeforeUpdate } from "vue";
import useMessageRef from "@/hooks/useMessageRef";
import { useId } from 'vue'


// let message = ref('hello')

// 自定义ref hooks 
let { message } = useMessageRef('frank', 2000);

onMounted(() => {
	console.log(message)
	console.log('isReactive(message) ', isReactive(message))  // false 
	console.log('isRef(message)', isRef(message))  // true
})

onBeforeUpdate(() => {
	console.log('isReactive(message) ', isReactive(message))  // false 
	console.log('isRef(message)', isRef(message))

	const uniqueId = useId()
	console.log('uniqueId', uniqueId)

})

</script>





<style scoped>
.app {
	background-color: #ddd;
	border-radius: 10px;
	box-shadow: 0 0 10px;
	padding: 10px;
}

button {
	margin: 0 5px;
}
</style>